<template>
    <div class="h-full flex flex-col relative p-1">
        <div class="demo-frame">
            <div class="demo-container">
                <div id="rectangle"></div>
                <video id="video" width="1600" height="530" preload autoplay loop muted controls>
                    <source src="../../assets/images/bbb.mp4" type="video/mp4" />
                </video>
                <canvas id="canvas" width="800" height="500"></canvas>
            </div>
        </div>
    </div>
</template>
<script setup>
let state = reactive({})

onMounted(() => {
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext('2d')

    tracking.ColorTracker.registerColor('purple', function (r, g, b) {
        // 定义偏差值
        var dx = r - 232
        var dy = g - 44
        var dz = b - 255

        // 计算欧氏距离
        var distanceSquared = dx * dx + dy * dy + dz * dz

        // 如果欧氏距离小于阈值，则认为颜色接近紫色
        return distanceSquared < 2000
    })

    var tracker = new tracking.ColorTracker(['purple'])
    tracker.setMinDimension(10)
    tracker.setMinGroupSize(5)

    tracking.track('#video', tracker)

    tracker.on('track', function (event) {
        context.clearRect(0, 0, canvas.width, canvas.height)
        event.data.forEach(function (rect) {
            context.strokeStyle = '#ffffff'
            context.strokeRect(rect.x, rect.y, rect.width, rect.height)
            context.font = '11px Helvetica'
            context.fillStyle = '#ffffff'
            context.fillText('山海有归期', rect.x + rect.width + 5, rect.y + 11)
            // context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22)
            // 绘制图片
            var img = new Image()
            img.src = 'src/assets/images/public/my.png'
            context.drawImage(img, rect.x + rect.width + 10, rect.y + 15, 45, 45)
        })
    })
})

defineExpose({})
const {} = toRefs(state)
</script>

<style>
.demo-container {
    background-color: black;
}

video,
canvas {
    position: absolute;
}
</style>
